// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import {router} from './router'
import {router} from './route-config'
import axios from 'axios'
// import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
import VueAxios from 'vue-axios'
import store from './store/index'
import {
  Field,
  Spinner,
  Switch
} from 'mint-ui'
import 'mint-ui/lib/style.css'
import PortalVue from 'portal-vue'

// Vue.use(Mint);
Vue.use(VueAxios, axios)
Vue.use(PortalVue)

//config
// Vue.config.silent = true
// Vue.config.devtools = false
Vue.config.performance = true



let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    console.log('MyPlugin myGlobalMethod')
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      console.log('MyPlugin directive')
    }
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      console.log('MyPlugin created')
    }
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    console.log('MyPlugin $myMethod')
  }
}

Vue.use(MyPlugin)


Vue.config.productionTip = false

Vue.directive('test', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})


var version = Number(Vue.version.split('.')[0])

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
      console.log(version)
    }
  }
})

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding, vnode, oldVnode) {
    // 聚焦元素
    el.focus()
    // console.log('el')
    console.log(el)
    // console.log('binding')
    console.log(binding)
    // console.log('vnode')
    console.log(vnode)
    // console.log('oldVnode')
    console.log(oldVnode)
  },
  update: function (el, binding, vnode, oldVnode) {
    console.log('update')
    console.log(binding.value)
    console.log(binding.oldValue)
    console.log(binding.arg)
  },
  bind: function () {
    console.log('bind')
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    console.log('componentUpdated')
    console.log(binding.value)
    console.log(binding.oldValue)
  },
  unbind: function () {
    console.log('unbind')
  }
})

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: ' + s(binding.name) + '<br>' +
      'value: ' + s(binding.value.color) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: ' + s(binding.arg) + '<br>' +
      'modifiers: ' + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg === 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Vue.filter('capitalize', function (value) {
  // if (!value) return ''
  // value = value.toString()
  return value.trim()
})

Vue.filter('capitalize1', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
  console.error(msg)
  console.log('全局捕获到异常啦啦啦啦')

}

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

Vue.component(Field.name, Field);
Vue.component(Spinner.name, Spinner);
Vue.component(Switch.name, Switch);


new Vue({
  el: '#app',
  router,
  axios,
  store,
  myOption: 'hello! app',
  components: {App},
  template: '<App/>',
  data() {
    return {
      msg: 'hello?'
    }
  }
})

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
  console.log('全局捕获到错误啦啦啦啦')
  console.log('err ' + err)
  console.log(vm)
  console.log('info ' + info)

  //重定向
  router.replace('/error')
  // console.log(this.router)
  // console.log(this.$router)
}




